<template>
  <div>
    <el-dialog
      :visible="loginVisible"
      :modal="false"
      append-to-body
      :before-close="close"
      :close-on-click-modal="false"
    >
      <div slot="title" class="login-welcome">
        <div class="login-welcome-left">
          <div>用户登录/注册</div>
        </div>
        <div class="login-welcome-right">
          <div>欢迎来到zBlog(*^▽^*)</div>
        </div>
      </div>
      <!-- 登录框按钮 -->
      <div class="user-item">
        <div class="user-tabs">
          <div class="user-login-button">
            <span
              :class="showLoginForm ? 'login-registry-color' : ''"
              @click="showLoginRegistryColor(0)"
              >登录</span
            >
          </div>
          <div class="user-registry-button">
            <span
              :class="showRegistryForm ? 'login-registry-color' : ''"
              @click="showLoginRegistryColor(1)"
              >注册</span
            >
          </div>
        </div>
      </div>
      <!-- 登录 -->
      <LoginForm
        @closeLoginWindow="closeLoginWindow"
        :showLoginForm.sync="showLoginForm"
        v-if="showLoginForm"
      />
      <!-- 注册 -->
      <RegistryForm
        :showLoginForm.sync="showLoginForm"
        :showRegistryForm.sync="showRegistryForm"
        :close="close"
        v-show="showRegistryForm"
      />
    </el-dialog>
  </div>
</template>

<script>
import LoginForm from "@/views/login/children/LoginForm.vue";
import RegistryForm from "@/views/login/children/RegistryForm.vue";
export default {
  components: { LoginForm, RegistryForm },
  props: {
    showVisible: {
      typeof: Boolean,
      default: false,
    },
  },
  data() {
    return {
      loginVisible: false,
      showLoginForm: true,
      showRegistryForm: false,
    };
  },
  methods: {
    close() {
      this.$emit("closeLogin", false);
      this.$message("你选择不登录哦! 登录后有更多精彩内容");
    },
    closeLoginWindow(data) {
      this.$emit("closeLogin", data);
    },
    showLoginRegistryColor(num) {
      if (num === 0) {
        this.showLoginForm = true;
        this.showRegistryForm = false;
      } else {
        this.showRegistryForm = true;
        this.showLoginForm = false;
      }
    },
  },

  watch: {
    showVisible(newVal) {
      this.loginVisible = newVal;
    },
  },
};
</script>

<style scoped lang="scss">
.login-welcome {
  display: flex;
  width: 100%;
  font-size: 20px;
  .login-welcome-left {
    justify-content: flex-start;
    display: flex;
    align-items: center;
  }
  .login-welcome-right {
    flex: 1;
    margin-right: 20px;
    justify-content: flex-end;
    display: flex;
    align-items: center;
  }
}

.user-item {
  padding: 20px;
  font-size: 16px;

  .user-tabs {
    display: flex;
    cursor: pointer;
  }

  .user-login-button {
    padding: 8px;
  }

  .user-registry-button {
    margin-left: 15px;
    padding: 8px;
  }
  .login-registry-color {
    padding-bottom: 5px;
    color: #18a058;
    border-bottom: 2px solid #18a058;
  }
}
::v-deep .el-dialog__body {
  padding: 20px 45px 20px 20px;
}
::v-deep .el-dialog__header {
  display: flex;
}
</style>
